<template>
  <div class="l-flex--col">
    <div class="l-flex--row">
      <slot name="label">
        <div class="label">选择地区</div>
      </slot>
      <CitySelect @change="onAreaChange" class="c-city"></CitySelect>
    </div>
    <div>
      <template v-if="multiple">
        <!-- {{ chooseData.length }} -->
        <div style="height: 20px"></div>
      </template>
      <template v-else>
        <span v-if="current[nameKey2]">
          当前选择:
          <span style="color: #409eff">{{ current[nameKey2] }}</span>
        </span>
        <span v-else>请选择一条数据</span>
      </template>
    </div>

    <div class="l-flex--row l-flex__fill">
      <el-card
        :body-style="{ height: '100%' }"
        class="box-card l-flex__fill"
        style="height: 100%"
        shadow="hover"
      >
        <!-- <template #header>
          <div style="height: 20px; lineheight: 20px" class="u-bold">
            合同覆盖小区
          </div>
        </template> -->
        <div class="l-flex--row stretch h-100">
          <div class="l-flex--col l-flex__fill c-border c-gap">
            <div class="l-flex--row c-header c-line">
              <span class="u-bold">请选择小区</span>
            </div>
            <div class="filter">
              <el-input
                v-model="filter1"
                placeholder="请输入关键词搜索"
                :clearable="true"
              ></el-input>
            </div>
            <div class="l-flex__fill list" v-loading="list1Loading">
              <template v-if="filterList1.length">
                <div
                  v-for="item in filterList1"
                  :key="item[idKey1]"
                  class="c-line u-pointer"
                  @click="onList1Select({ [idKey1]: item[idKey1] })"
                >
                  <span>
                    {{ item[nameKey1] }}
                  </span>
                </div>
              </template>
              <el-empty v-else></el-empty>
            </div>
          </div>
          <!-- <div class="l-flex--row l-flex__self" style="width:20px"></div> -->
          <div class="l-flex--col l-flex__fill c-border c-gap">
            <div class="l-flex--row c-header c-line">
              <span class="u-bold">
                <el-checkbox
                  v-if="multiple"
                  style="margin-right: 10px"
                  :value="isAllChooese"
                  @change="handleAllChooese"
                ></el-checkbox>
                请选择电梯
                <template v-if="multiple">
                  <el-button
                    style="margin-left: 20px"
                    type="primary"
                    @click.native="showDrawer"
                  >
                    当前已选择{{ chooseData.length }}项
                  </el-button>
                  <TableDrawer
                    size="700px"
                    :showPagination="false"
                    :schema="drawerSchema"
                    ref="drawerSchema"
                    @update='onChooseDataChange'
                  ></TableDrawer>
                </template>
              </span>
            </div>
            <div class="filter">
              <el-input
                v-model="filter2"
                placeholder="请输入关键词搜索"
                :clearable="true"
              ></el-input>
            </div>
            <div class="l-flex__fill list" v-loading="list2Loading">
              <template v-if="filterList2.length">
                <div
                  v-for="item in filterList2"
                  :key="item[idKey2]"
                  class="c-line u-pointer"
                  @click="setCurrent(item)"
                >
                  <span v-if="multiple">
                    <el-checkbox
                      style="margin-right: 10px"
                      :value="isChooese(item[idKey2])"
                      @change="handleCheckChange(item, $event)"
                    ></el-checkbox>
                  </span>
                  <span>
                    {{ item[nameKey2] }}
                  </span>
                </div>
              </template>
              <el-empty v-else></el-empty>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as listEstate } from '@/api/elevator-archives/configuration/housingMgt';
import { list as listElevators } from '@/api/elevator-archives/info';
import CitySelect from '@/components/CitySelect';
import BaseBtn from '@/components/BaseBtn/index';
import TableDrawer from '@/components/TableDrawer/index';
export default {
  name: 'picker',
  components: {
    CitySelect,
    TableDrawer,
    BaseBtn
  },
  props: {
    config: {
      type: Array,
      default: () => [
        {
          name: 'estateName',
          id: 'estateId',
          remote: listEstate
        },
        {
          name: 'elevatorName',
          id: 'elevatorId',
          remote: listElevators
        }
      ]
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      filter1: '',
      list1: [],
      filter2: '',
      list2: [],
      list1Loading: false,
      list2Loading: false,
      current: {},
      chooseData: [],
      drawerSchema: {
        list: this.getDrawerData,
        title: '选择项',
        condition: {},
        selectType: 'multiple',
        hasDel:true,
        id:this.config[1].id,
        queryBtnCfg: {
          //查询
          fuzzyQuery: {
            isShow: false
          },
          //高级查询
          advancedQuery: {
            isShow: false
          }
        },
        columnCfg: {
          [this.config[1].name]: {
            label: '电梯名称'
          }
        }
      }
    };
  },
  computed: {
    nameKey1() {
      return this.config[0].name;
    },
    nameKey2() {
      return this.config[1].name;
    },
    idKey1() {
      return this.config[0].id;
    },
    idKey2() {
      return this.config[1].id;
    },
    remoteKey1() {
      return this.config[0].remote;
    },
    remoteKey2() {
      return this.config[1].remote;
    },
    filterList1() {
      if (!this.filter1) return this.list1;
      let result = [];
      for (const item of this.list1) {
        if (new RegExp(this.filter1).test(item[this.nameKey1])) {
          result.push(item);
        }
      }
      return result;
    },
    filterList2() {
      if (!this.filter2) return this.list2;
      let result = [];
      for (const item of this.list2) {
        if (new RegExp(this.filter2).test(item[this.nameKey2])) {
          result.push(item);
        }
      }
      return result;
    },
    isAllChooese() {
      if (!this.filterList2.length) return false;
      if (!this.chooseData.length) return false;
      for (const item of this.filterList2) {
        if (!this.chooseData.some(i => i[this.idKey2] === item[this.idKey2])) {
          return false;
        }
      }
      return true;
    }
  },
  methods: {
    onChooseDataChange(v){
      console.log(v);
    },
    onAreaChange(id) {
      this.list1Loading = true;
      const methods = this.remoteKey1;
      methods({ cityId: id })
        .then(res => {
          this.filter1 = '';
          this.list1 = res.rows;
          this.list2 = [];
        })
        .finally(() => (this.list1Loading = false));
    },
    onList1Select(params) {
      this.list2Loading = true;
      const methods = this.remoteKey2;
      methods(params)
        .then(res => {
          this.filter2 = '';
          this.list2 = res.rows;
        })
        .finally(() => (this.list2Loading = false));
    },
    getData() {
      if (!this.current[this.idKey2]) {
        this.$message.error('请选择一条数据');
        return;
      }
      this.$emit('submit', this.current);
      return this.current;
    },
    setCurrent(current) {
      this.current = current;
    },
    setChooseData(data) {
      this.chooseData = data;
      // this.list2 = data;
    },
    getChooseData() {
      if (!this.chooseData.length) return false;
      return this.chooseData.map(i => i[this.idKey2]);
    },
    show(current) {
      current && this.setCurrent(current);
    },
    isChooese(id) {
      if (!this.chooseData.length) return false;
      return this.chooseData.some(i => i[this.idKey2] === id);
    },
    handleCheckChange(item, v) {
      if (v) {
        this.chooseData.push(item);
      } else {
        let index = this.chooseData.findIndex(
          i => i[this.idKey2] === item[this.idKey2]
        );
        this.chooseData.splice(index, 1);
      }
    },
    handleAllChooese(v) {
      if (v) {
        for (const item of this.filterList2) {
          this.chooseData.push(item);
        }
        this.chooseData = [
          ...new Set(this.chooseData.map(item => item[this.idKey2]))
        ].map(id => this.chooseData.find(i => i[this.idKey2] === id));
      } else {
        for (const item of this.filterList2) {
          let index = this.chooseData.findIndex(
            i => i[this.idKey2] === item[this.idKey2]
          );
          this.chooseData.splice(index, 1);
        }
      }
    },
    showDrawer() {
      this.$refs.drawerSchema.show();
    },
    getDrawerData() {
      return Promise.resolve({ rows: this.chooseData });
    }
  }
};
</script>
<style lang="scss" scoped>
.c-border {
  border: 1px solid #dddee1;
}
.c-header {
  background-color: #f8f8f9;
}
.c-line {
  line-height: 40px;
  padding: 0 20px;
  border-bottom: 1px solid #dddee1;
  display: flex;
  align-items: center;
}
.c-checkbox {
  margin-right: 20px !important;
}
.my-30 {
  margin: 30px 0;
}
.c-city {
  margin-left: 20px;
  width: 50%;
}
.c-gap {
  margin: 0 20px;
}
.filter {
  margin: 20px;
}
.list {
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
}
</style>
